<template>
  <div class="app-container">
    <el-card>
      <div>
        <h4 class="text-red-400 mb-4">
          说明：功能开启后，将会根据设置的金额，禁止未充值用户在房间公屏发言或上麦，请谨慎开启
        </h4>
        <div class="mb-5">
          <span>控制开关：</span>
          <el-radio-group v-model="form.is_open">
            <el-radio :label="1">开</el-radio>
            <el-radio :label="0">关</el-radio>
          </el-radio-group>
        </div>
        <div v-show="form.is_open" class="mb-5">
          <span>控制类型：</span>
          <el-radio-group v-model="form.is_all_room">
            <el-radio :label="1">全部房间</el-radio>
            <el-radio :label="0">指定房间</el-radio>
          </el-radio-group>
        </div>
        <div v-show="form.is_open && form.is_all_room === 0" class="flex mb-20">
          <span>房间ID：</span>
          <div class="flex flex-col">
            <el-input
              class="input ml-3 mb-3"
              type="textarea"
              v-model="form.room_ids"
              :rows="5"
            ></el-input>
            <span class="text-red-400 ml-3">
              请输入房间id，若多个请用,隔开
            </span>
          </div>
        </div>
        <div class="ml-40">
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getData, postData } from "@/api/operationalTools/limitOnMicrophone";

export default {
  name: "",
  data() {
    return {
      form: {
        is_open: 0,
        is_all_room: 0,
        room_ids: undefined
      }
    };
  },
  created() {
    this.handleGetData();
  },
  methods: {
    handleGetData() {
      getData().then(res => {
        this.form.is_open = parseInt(res.data.NO_MONEY_OPEN.value);
        this.form.is_all_room = parseInt(res.data.NO_MONEY_ALL_ROOM.value);
        this.form.room_ids = res.data.NO_MONEY_ROOM_CODES.value;
      });
    },

    handleSubmit() {
      postData(this.form).then(res => {
        if (res.code === 200) {
          this.$message.success("操作成功");
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .input {
  width: 400px;
}
</style>
